<template>
  <div class="app-container">
    <el-card>
      <!-- 头部搜素start -->
      <el-form :model="query" ref="queryForm" v-show="showSearch" :inline="true">
        <el-form-item label="任务名称">
          <common-input v-model="query.jobDesc" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="调度时间">
          <el-date-picker v-model="jobTime" type="datetimerange" :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 头部搜素end -->

      <!--列表 start-->
      <common-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
        <el-table-column label="任务名称" align="left" prop="jobDesc">
          <template slot-scope="{row}">{{ row.jobDesc }}</template>
        </el-table-column>
        <el-table-column label="方法名称" align="left" prop="executorHandler">
          <template slot-scope="{row}">{{ row.executorHandler }}</template>
        </el-table-column>
        <el-table-column label="执行地址" align="left" prop="executorAddress" >
          <template slot-scope="{row}">{{ row.executorAddress }}</template>
        </el-table-column>


        <!--  先调度 再执行  -->
        <!--  调度状态 triggerCode
              调度结果 triggerMsg
              执行状态 handleCode
              执行结果 handleMsg -->

        <el-table-column label="调度状态" align="center" width="100px">
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.triggerCode===200">调度成功</el-tag>
            <el-tag type="success" v-if="row.triggerCode===0">调度中</el-tag>

            <el-popover
              placement="top"
              trigger="hover">
              <div v-html="row.triggerMsg"></div>
              <template slot="reference">
                <el-tag type="danger" v-if="row.triggerCode===500">调度失败</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="执行状态" align="center" width="100px">
          <template slot-scope="{row}">
            <el-tag type="success"  v-if="row.triggerCode===200 && row.handleCode===200">执行成功</el-tag>
            <el-tag type="success" v-if="row.triggerCode===200 && row.handleCode===0">执行中</el-tag>
            <el-popover
              placement="top"
              trigger="hover"
              width="400">
              <div v-html="row.handleMsg || '失败'"></div>
              <template slot="reference">
                <el-tag type="danger" v-if="row.handleCode===500">执行失败</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="调度时间" align="left" prop="triggerTime" width="160px">
          <template slot-scope="{row}">
            {{ row.triggerTime ? utils.resolvingDate(row.triggerTime) : '-'}}
          </template>
        </el-table-column>
        <el-table-column label="运行结束时间" align="left" prop="handleTime" width="160px">
          <template slot-scope="{row}">
            {{ row.handleTime ? utils.resolvingDate(row.handleTime) : '-'}}
          </template>
        </el-table-column>


        <el-table-column label="操作" align="left" width="180px">
          <template slot-scope="{row}">
            <el-button type="text" @click="logDetail(row.executorAddress,1,row.id,row.triggerTime)">执行日志</el-button>
            <el-button type="text" v-if="row.handleCode === 0"
                       @click="logKillFun(row.id)">终止任务
            </el-button>
          </template>
        </el-table-column>
      </common-table>

      <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList"/>

      <el-dialog
        title="执行日志"
        :visible.sync="isExecuteLog">
        <div v-html="executeLogContent"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isExecuteLog = false">返回</el-button>
        </span>
      </el-dialog>
    </el-card>
    <!-- 列表 end -->
  </div>
</template>

<script>
  import {
    taskhis_list,
    taskhis_logKill,
    taskhis_logDetailCat,
    executor_list
  } from '@/api/taskcenter/all'

  export default {
    components: {},
    props: {},
    data() {
      return {
        showSearch: true, // 查询部分显示
        total: 1, // 总条数
        loading: false, // table 加载中
        list: [], // 数据列
        selectionIds: '', // 列表选中数据id
        single: true, // 非单个禁用
        multiple: true, // 非多个禁用
        jobTime: '', //查询时间
        query: {
          pageNum: 1,
          pageSize: 10
        }, // 查询条件
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 7
                )
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 30
                )
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 90
                )
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },

        isExecuteLog: false,
        executeLogContent: '',
        executorList: []// 服务列表
      }
    },
    watch: {},
    computed: {},
    methods: {
      /**
       * 选择
       */
      handleSelectionChange(selection) {
        this.selectionIds = selection.map((item) => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /**
       * 获取列表
       */
      getList() {
        let query = { ...this.query }
        this.loading = true
        taskhis_list(query).then((res) => {
          this.list = res.rows
          this.total = res.total
          this.loading = false
        })
      },
      /**
       * 查询
       */
      handleQuery() {
        this.query.pageNum = 1
        if (this.jobTime) {
          this.query.triggerTimeStart = this.jobTime[0]
          this.query.triggerTimeEnd = this.jobTime[1]
        } else {
          this.query.triggerTimeStart = ''
          this.query.triggerTimeEnd = ''
        }
        this.getList()
      },
      /**
       * 重置查询
       */
      resetQuery() {
        this.query = this.$options.data().query
      },
      /**
       * 删除
       */
      del(ids) {
        this.$confirm('是否确认删除数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.getList()
            this.$GlobalSuccessMessage('删除成功')
          })
      },
      /**
       * 终止任务
       */
      logKillFun(jobId) {
        this.$confirm('是否终止任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            taskhis_logKill({ id: jobId }).then((res) => {
              this.$GlobalSuccessMessage('操作成功')
              this.getList()
            })
          })
      },
      /**
       * 日志详情
       */
      logDetail(executorAddress, fromLineNum, logId, triggerTime) {
        taskhis_logDetailCat({
          executorAddress: executorAddress,
          fromLineNum: fromLineNum,
          logId: logId,
          triggerTime: new Date(triggerTime).getTime()
        }).then(res => {
          const reg = new RegExp('\n', 'g')
          this.executeLogContent = res.content.logContent.replace(reg, '<br/>')
          this.isExecuteLog = true
        })
      },
      getExecutorList() {
        executor_list({
          pageNum: 1,
          pageSize: 999
        }).then(res => {
          this.executorList = res.rows.reduce((r, c) => {
            r.push({
              label: c.title,
              value: c.id
            })
            return r
          }, [])
        })
      }
    },
    created() {
      this.getList()
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
</style>
